<template>
  <div class="home">
    <!--
      当transition包裹的dom产生消失和重现的过程时会触发过渡动画
      vue的消失和重现过程包括 v-show/v-if/路由
    -->
    <!--<button @click="show = false">隐藏</button><button @click="show = true">显示</button>-->
    <button @click="show = false">折叠</button><button @click="show = true">展开</button>
    <transition name="silde">
     <!-- <button v-show="show">消失和隐藏的按钮</button> -->
     <ul v-if="show">
       <li>德玛西亚</li>
       <li>诺克萨斯</li>
       <li>艾欧尼亚</li>
       <li>均衡教派</li>
     </ul>
    </transition>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      show: true
    }
  },
}
</script>
<style lang="scss" scoped>
  .a-enter, .a-leave-to  {
    opacity: 0;
  }
  .a-enter-active, .a-leave-active {
    transition: opacity 3s linear;
  }
  ul {
    height: 80px;
    overflow: hidden;
    li {
      height: 20px;
    }
  }
  .silde-enter, .silde-leave-to {
    height: 0;
    opacity: 0;
    color: red;
  }
  .silde-enter-active, .silde-leave-active {
    transition: all 5s linear;
  }
  

</style>
